<template>
	<view class="outside">
		<view class="top" @click="clickHandler" v-if="typeCode!=1&&typeCode!=2">
			<view class="float" :style="statusStr!='未过期'?'background: #999 !important;':''">{{statusStr}}</view>
			<image class="img" :src="img" mode="aspectFill"></image>
			<view class="title"><text>{{title}}</text></view>
			<view class="line" v-if="typeCode!=1&&typeCode!=2">
				<text class="key">时间</text>
				<view class="center"></view>
				<text class="value">{{dateStr}}</text>
			</view>
			<view class="line">
				<text class="key">地点</text>
				<view class="center"></view>
				<text class="value">{{location}}</text>
			</view>
		</view>
		<view class="order" v-if="typeCode==1||typeCode==2" @click="clickHandler">
			<view class="float">{{statusStr}}</view>
			<view class="inside">
				<view class="title">参观日期</view>
				<view class="date">{{dateStr}}</view>
				<view class="id">预约编号<text>{{id}}</text></view>
				<view class="create-time">创建时间<text>{{createStr}}</text></view>
			</view>
		</view>
		<view v-if="isShow">
			<view class="ticket" v-if="!isTeam">
				<view class="title">观众信息</view>
				<view class="inside" v-for="(item,index) in personList">
					<view class="head">{{typeName}}门票</view>
					<view class="name">{{item.p1Name}}</view>
					<view class="card">身份证<text>{{item.p1Card}}</text></view>
					<view class="pay">预约名额<text>免费</text></view>
					<view class="status">检票状态<text>{{item.isCanceled?'已取消':(item.isChecked?'已检票':'未检票')}}</text></view>
				</view>
			</view>
			<view class="ticket" v-if="isTeam&&personList">
				<view class="title">观众信息</view>
				<view class="inside">
					<view class="head">{{typeName}}{{isTeam?'团队':''}}门票</view>
					<view class="name">{{personList[0].p1Name}}<text>领队</text></view>
					<view class="card">身份证<text>{{personList[0].p1Card}}</text></view>
					<view class="name">{{personList[0].p2Name}}<text>副领队</text></view>
					<view class="card">身份证<text>{{personList[0].p2Card}}</text></view>
					<view class="pay">团队人数<text>{{num}}</text></view>
					<view class="status">
						检票状态<text>{{personList[0].isCanceled?'已取消':(personList[0].isChecked?'已检票':'未检票')}}</text></view>
				</view>
			</view>
			<button class="cancel" @click="cancel" v-if="!isCanceled">取消预约</button>
		</view>
	</view>
</template>

<script>
	import {
		dateToString
	} from '../../js_sdk/date-parse/date-parser.js'
	import {
		doGet
	} from '../../js_sdk/request-helper.js'
	export default {
		props: {
			id: String,
			typeCode: String,
			typeName: String,
			img: String,
			title: String,
			location: String,
			date: String,
			createTime: String,
			isTeam: Number,
			num: Number,
			isCanceled: Number
		},
		data() {
			return {
				statusStr: this.getStatusStr(),
				dateStr: dateToString(new Date(this.date.replace(/-/g,'/')), 'yyyy年MM月dd日'),
				startStr: this.orderStart?dateToString(new Date(this.orderStart.replace(/-/g,'/')), 'yyyy年MM月dd日 hh:mm:ss'):'',
				createStr: dateToString(new Date(this.createTime.replace(/-/g,'/')), 'yyyy年MM月dd日 hh:mm:ss'),

				isShow: false,
				personList: undefined
			}
		},
		methods: {
			getStatusStr() {
				let str = '';
				if (this.isCanceled) {
					str = '已取消'
				} else {
					let today = new Date()
					today.setHours(0)
					today.setMinutes(0)
					today.setSeconds(0)
					today.setMilliseconds(0)

					let start = new Date(this.date)
					if (today.getTime() > start.getTime()) {
						str = '已过期'
					} else {
						str = '未过期'
					}
				}
				return str
			},
			getTicket() {
				doGet('/blade-order/ord/ticket?id=' + this.id, (res) => {
					this.personList = res
				}, (err) => {

				})
			},
			clickHandler() {
				if (this.isCanceled) {
					return
				}
				this.isShow = !this.isShow
				if (!this.personList) {
					this.getTicket()
				}
			},
			cancel() {
				this.$emit('cancel', this.id)
			}
		}
	}
</script>

<style>
	.outside {
		position: relative;
		background: #eee;
		width: 100%;
		margin-bottom: 40rpx;
	}

	.top {
		position: relative;
		background: #fff;
		width: calc(100% - 40rpx);
		padding: 20rpx;
	}

	.top .float {
		z-index: 10;
		right: 20rpx;
		top: 20rpx;
		color: #fff;
		background: #AE6059;
		position: absolute;
		font-size: 24rpx;
		line-height: 24rpx;
		padding: 10rpx 20rpx;
		border-radius: 0 0 0 10rpx;
	}

	.outside .img {
		width: 100%;
		height: 360rpx;
		border-radius: 5rpx;
	}

	.outside .title {
		padding: 20rpx;
		color: #333;
		font-size: 34rpx;
		font-weight: bold;
	}

	.outside .line {
		padding: 0 20rpx;
		font-size: 28rpx;
		height: 40rpx;
		display: flex;
		align-items: center;
		justify-content: flex-start;
	}

	.outside .line .key {
		color: #666;
	}

	.outside .line .center {
		height: 24rpx;
		width: 1rpx;
		background: #ddd;
		margin: 0 20rpx;
	}

	.outside .line .value {
		color: #999;
	}

	.order {
		position: relative;
		margin-top: 20rpx;
		width: 100%;
		padding: 20rpx 0;
		background: #fff;
	}

	.order .float {
		right: 20rpx;
		top: 20rpx;
		color: #fff;
		background: #AE6059;
		position: absolute;
		font-size: 24rpx;
		line-height: 24rpx;
		padding: 10rpx 20rpx;
		border-radius: 0 0 0 10rpx;
	}

	.order .inside {
		width: calc(100% - 40rpx);
		margin: 0 20rpx;
		background: #eee;
	}

	.order .inside .title {
		padding: 40rpx 40rpx 20rpx 40rpx;
		color: #333;
		font-weight: bold;
		font-size: 32rpx;
	}

	.order .inside .date {
		color: #333;
		font-size: 28rpx;
		margin: 0 40rpx 0 40rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #ccc;
	}

	.order .inside .id {
		margin: 20rpx 40rpx 0 40rpx;
		color: #333;
		font-size: 28rpx;
	}

	.order .inside .id text {
		margin-left: 40rpx;
		color: #666;
	}

	.order .inside .create-time {
		margin: 10rpx 40rpx 0 40rpx;
		padding-bottom: 40rpx;
		color: #333;
		font-size: 28rpx;
	}

	.order .inside .create-time text {
		margin-left: 40rpx;
		color: #666;
	}

	.ticket {
		margin-top: 20rpx;
		width: 100%;
		background: #fff;
		padding-bottom: 20rpx;
	}

	.ticket .title {
		color: #333;
		font-weight: bold;
		font-size: 32rpx;
		padding: 30rpx 60rpx;
	}

	.ticket .inside {
		background: #eee;
		width: calc(100% - 120rpx);
		margin: 0 20rpx;
		padding: 40rpx;
	}

	.ticket .inside .head {
		color: #333;
		font-size: 32rpx;
		padding-bottom: 20rpx;
		border-bottom: 1rpx solid #ccc;
	}

	.ticket .inside .name {
		margin-top: 20rpx;
		color: #333;
		font-size: 28rpx;
	}

	.ticket .inside .name text {
		margin-left: 40rpx;
		color: #999;
	}

	.ticket .inside .card {
		color: #333;
		font-size: 28rpx;
	}

	.ticket .inside .card text {
		margin-left: 40rpx;
		color: #999;
	}

	.ticket .inside .pay {
		margin-top: 10rpx;
		color: #333;
		font-size: 28rpx;
		padding-bottom: 10rpx;
		border-bottom: 1rpx solid #ccc;
	}

	.ticket .inside .pay text {
		margin-left: 40rpx;
		color: #999;
	}

	.ticket .inside .status {
		margin-top: 10rpx;
		color: #333;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.ticket .inside .status text {
		color: #AE6059;
	}

	.cancel {
		width: calc(100% - 40rpx);
		margin: 40rpx 20rpx;
		background: #B9AC90;
		color: #fff;
		text-align: center;
		line-height: 80rpx;
		height: 80rpx;
		border-radius: 0;
		font-size: 28rpx;
	}
</style>
